import * as echarts from '../../../components/ec-canvas/echarts'; //引入echarts.js
var dataList = [];
Page({
    data: {
        ec: {
            lazyLoad: true // 图标延迟加载
        },
        histogram:'',
        pieImg:'',
        histogramcanvasClick: '',
        pieCanvasClick: '',
        shareShow: false,
    },
    onLoad() {
        this.getData(); // 后台接口获取数据
        // 点赞成功弹窗
        wx.showToast({
            title: '已点赞',
            image:'../../../images/index/zan_ok.png',
            duration: 2000
        })
    },
    getData: function () {
        this.init_echarts(); //初始化图表
    },

    shareBtn(){
        this.setData({
            shareShow: !this.data.shareShow,
        })
    },

    goComment(){
        wx.navigateTo({
          url: './comment/comment',
        })
    },

    //初始化图表
    init_echarts: function () {
        this.selectComponent('#mychart').init((canvas, width, height) => {
            const Chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            Chart.setOption(this.getOption());
            Chart.on('finished',()=>{
                this.canvasToImg('mychart')
            })
            // 注意这里一定要返回 chart 实例，否则会影响事件处理等
            return Chart;
        });
        this.selectComponent('#pieChart').init((canvas, width, height) => {
            const Chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            Chart.setOption(this.getPieOption());
            Chart.on('finished',()=>{
                this.canvasToImg('pieChart')
            })
            // 注意这里一定要返回 chart 实例，否则会影响事件处理等
            return Chart;
        });
        
        
    },
   
    canvasToImg(id){
        const demo = this.selectComponent(`#${id}`);
        demo.canvasToTempFilePath({
            success: res => {
                console.log("tempFilePath:", res.tempFilePath)
                if(id == 'mychart'){
                    this.setData({
                        histogram :res.tempFilePath,
                        histogramcanvasClick: 'hide'
                    })
                }else{
                    this.setData({
                        pieImg :res.tempFilePath,
                        pieCanvasClick: 'hide'
                    })
                }
                fail: res => console.log(res)
            }
        });
    },
    // 饼图配置
    getPieOption:function(){
        var option = {
            tooltip: {
                trigger: 'item',
            },
            legend: {
                right: '5%',
                top: 'center',
                orient: 'vertical',
            },
            series: [
                {
                    name: '动值',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['30%', '50%'], //图的位置，距离左跟上的位置
                    avoidLabelOverlap: false,
                    color: ['rgb(203,155,255)', 'rgb(149,162,255)', 'rgb(58,186,255)',
                'rgb(119,168,249)', 'rgb(235,161,159)'],//五个数据，五个颜色
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '10',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 6, name: '4min +6'},
                        {value: 26, name: '26min +26'},
                        {value: 29, name: '29min +29'},
                        {value: 5, name: '5min +5'},
                        {value: 6, name: '4min +6'}
                    ]
                }
            ]
        };
        return option
    },
    // 柱状图配置
    getOption: function () {
        var colorListArr = ["#a7aba1", "#18a43d", "#0099db", "#FF9806", '#fff100', '#c9080b'];
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '8%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1', '', '', '', '5', '', '', '', '', '10', '', '', '', '', '15'],
                splitLine: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    rotate: 0, // 如果X轴文字过长，坐标轴斜着显示
                    textStyle: {
                        color: "#999999",
                        fontSize: '6'
                    },
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#999999",
                        fontSize: '6'
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(131,101,101,0.2)",
                        type: "dashed",
                    },
                },
            },
            series: {
                z: 2,
                name: "动值",
                type: "bar",
                data: [12, 23, 44, 54, 80, 125, 166, 188, 252, 260, 110, 100, 60, 30, 10].map((item, i) => {
                    let oColor = '';
                    if (item <= 50) {
                        oColor = colorListArr[0]
                    } else if (50 < item && item <= 100) {
                        oColor = colorListArr[1]
                    } else if (100 < item && item <= 150) {
                        oColor = colorListArr[2]
                    } else if (150 < item && item <= 200) {
                        oColor = colorListArr[3]
                    } else if (200 < item && item <= 250) {
                        oColor = colorListArr[4]
                    } else if (250 < item) {
                        oColor = colorListArr[5]
                    }
                    let itemStyle = {
                        color: oColor,
                    };
                    return {
                        value: item,
                        itemStyle: itemStyle,
                    };
                }),
                label: {
                    show: false,
                },
            },
        }
        return option
    }
})